<template>
  <div class="quick-navigation-list">
    <div
      class="inline-block quick-navigation-item"
      :class="[activeNavigation == navigation.prop ? 'active' : '', navigation.theme]"
      v-for="navigation in quickNavigationList"
      :key="navigation.label"
      @click="navigationClickFn(navigation)"
    >
      <div class="flex items-center quick-navigation-item-label">
        {{ navigation.label }}
        <SvgIcon v-if="navigation.icon" :name="navigation.icon" class="navigation-icon" />
        <!-- 车辆冲突tooltip -->
        <a-tooltip v-if="navigation.prop == 'carRepeat'" content="2个以上未结束订单在交叉时间段内使用了同一台车">
          <icon-question-circle class="navigation-icon" />
        </a-tooltip>
      </div>
      <div class="quick-navigation-item-value">{{ navigation.num }}</div>
      <div class="active-border"></div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import { getStatistics } from '@/api/order/czsOrder'
  import dayjs from 'dayjs'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routeQuery = route.query
  const emit = defineEmits(['change'])
  // 快捷导航选中
  let activeNavigation = ref('total')
  // 快捷导航
  const quickNavigationList = ref([
    { label: '全部订单', theme: 'blue', prop: 'total', num: 0, active: true },
    { label: '异店还车', theme: 'blue', prop: 'diffSite', num: 0 },
    { label: '24小时内新订单', theme: 'blue', prop: 'addOrder24', num: 0 },
    { label: '逾期未还', theme: 'red', prop: 'returnOverdue', num: 0 },
    { label: '逾期未交', theme: 'red', prop: 'giveOverdue', num: 0 },
    { label: '车辆冲突', theme: 'red', prop: 'carRepeat', num: 0 },
    { label: '今日交车', theme: 'yellow', prop: 'giveToday', num: 0 },
    { label: '今日还车', theme: 'yellow', prop: 'returnToday', num: 0 },
    { label: '明日交车', theme: 'yellow', prop: 'giveTomorrow', num: 0 },
    { label: '明日还车', theme: 'yellow', prop: 'returnTomorrow', num: 0 },
    { label: '合同签署中(付费版)', theme: 'yellow', prop: 'signingNum', num: 0 },
    { label: '合同未发起(付费版)', theme: 'yellow', prop: 'unSigningNum', num: 0 },
    { label: '合同签署中(普通版)', theme: 'yellow', prop: 'ordinaryNum', num: 0 },
    { label: '未确认费用', theme: 'green', prop: 'waitConfirm', num: 0 },
    { label: '租车押金应退未退', theme: 'green', prop: 'carDeposit', num: 0 },
    // { label: '违章押金即将到期', theme: 'green', prop: 'illegalDeposit', num: 0 },
  ])
  const getStNum = () => {
    getStatistics().then(({ result }) => {
      if (result) {
        quickNavigationList.value.forEach((navigation) => {
          let prop = navigation.prop
          if (prop) {
            navigation.num = result[prop] || 0
          }
        })
      }
    })
  }
  const format = (dayjsObj) => {
    return dayjsObj.format('YYYY-MM-DD HH:mm:ss')
  }
  const navigationClickFn = ({ label, prop }) => {
    activeNavigation.value = prop
    let param = {}
    let today = dayjs()
    let begin, end
    switch (label) {
      case '全部订单':
        // 全部订单
        break
      case '借调车':
        // 关联了借调单的订单
        break
      case '今日交车':
        // 预计开始时间为今日+订单状态待排车&待用车
        begin = format(today.startOf('d'))
        end = format(today.endOf('d'))
        param = {
          expectedUseCarTimeStart: begin,
          expectedUseCarTimeEnd: end,
          startTimeRange: [begin, end],
          statusList: [10, 100], // 待排车&待用车
        }
        break
      case '今日还车':
        // 预计结束时间为今日+订单状态用车中
        begin = format(today.startOf('d'))
        end = format(today.endOf('d'))
        param = {
          expectedReturnCarTimeStart: begin,
          expectedReturnCarTimeEnd: end,
          endTimeRange: [begin, end],
          statusList: [10, 100, 200], // 用车中
        }
        break
      case '24小时内新订单':
        // 下单时间为当前时间前24小时的订单
        begin = format(today.subtract(24, 'h'))
        end = format(today)
        param = {
          createTimeStart: begin,
          createTimeEnd: end,
          orderCreateTimeRange: [begin, end],
        }
        break
      case '明日交车':
        // 预计交车时间为次日的订单
        begin = format(today.add(1, 'd').startOf('d'))
        end = format(today.add(1, 'd').endOf('d'))
        param = {
          expectedUseCarTimeStart: begin,
          expectedUseCarTimeEnd: end,
          startTimeRange: [begin, end],
          statusList: [10, 100], // 用车中
        }
        break
      case '明日还车':
        // 预计还车时间为次日的订单
        begin = format(today.add(1, 'd').startOf('d'))
        end = format(today.add(1, 'd').endOf('d'))
        param = {
          expectedReturnCarTimeStart: begin,
          expectedReturnCarTimeEnd: end,
          endTimeRange: [begin, end],
          statusList: [10, 100, 200], // 用车中
        }
        break
      case '合同签署中(付费版)':
        param = {
          orderLableList: ['合同签署中(付费版)'],
        }
        break
      case '合同签署中(普通版)':
        param = {
          orderLableList: ['合同签署中(普通版)'],
        }
        break
      case '合同未发起(付费版)':
        param = {
          orderLableList: ['合同未发起(付费版)'],
        }
        break
      case '逾期未交':
        // 标签逾期未交
        param = {
          orderLableList: ['逾期未交'], // 逾期未交
        }
        break
      case '逾期未还':
        // 标签逾期未还
        param = {
          orderLableList: ['逾期未还'], // 逾期未还
        }
        break
      case '未确认费用':
      case '异店还车':
      case '租车押金应退未退':
      case '违章押金即将到期':
      case '车辆冲突':
        param = {
          orderLableList: [label],
        }
        break
    }
    emit('change', param)
  }

  const reset = () => {
    activeNavigation.value = 'total'
  }
  const clickActive = (item) => {
    activeNavigation.value = item
  }
  const clickActiveByLabel = (label) => {
    const labelOption = quickNavigationList.value.find((item) => item.label === label)
    if (labelOption) {
      navigationClickFn(labelOption)
    }
  }
  defineExpose({
    reset,
    getStNum,
    clickActive,
    clickActiveByLabel,
  })
</script>
<style lang="less" scoped>
  .quick-navigation-list {
    .quick-navigation-item {
      height: 62px;
      border-radius: 2px;
      padding: 9px 0 9px 16px;
      margin-right: 20px;
      margin-bottom: 20px;
      color: #ffffff;
      cursor: pointer;
      position: relative;
      &:hover {
        transform: scale(1.1);
        transition: transform 0.3s;
        z-index: 999;
      }
      @media screen and (min-width: 1000px) {
        width: calc(100% / 7 - 17.2px);
        &:nth-of-type(6n) {
          margin-right: 20px;
        }
        &:nth-of-type(7n) {
          margin-right: 0;
        }
      }
      @media screen and (min-width: 1440px) {
        width: calc(100% / 8 - 17.5px);
        &:nth-of-type(7n) {
          margin-right: 20px;
        }
        &:nth-of-type(8n) {
          margin-right: 0;
        }
      }
      .quick-navigation-item-label {
        font-size: 12px;
        line-height: 17px;
      }
      .quick-navigation-item-value {
        height: 28px;
        line-height: 28px;
        font-size: 20px;
        font-weight: 600;
      }
      .active-border {
        height: 6px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        display: none;
        border-radius: 0 0 2px 2px;
      }
    }
    .quick-navigation-item.blue {
      background-color: #95b4fcff;
      .active-border {
        background-color: #5786f3ff;
      }
    }
    .quick-navigation-item.red {
      background-color: #f76964ff;
      .active-border {
        background-color: #e23838ff;
      }
    }
    .quick-navigation-item.yellow {
      background-color: #fab855ff;
      .active-border {
        background-color: #f79a29ff;
      }
    }
    .quick-navigation-item.green {
      background-color: #70d6a1ff;
      .active-border {
        background-color: #33b571ff;
      }
    }
    .quick-navigation-item.active {
      box-shadow: 0 4px 5px rgb(5 19 56 / 20%);
      .active-border {
        display: block;
      }
    }
  }
  .navigation-icon {
    width: 14px;
    height: 14px;
    margin-left: 5px;
  }
</style>
